import React, { Component } from 'react'
import { Text, View,Image,ScrollView,Button  } from 'react-native'
import {get} from '../../utils/http'
import {Wrap,Ul,Img,Left,Bottom} from './styled'
import { Actions } from 'react-native-router-flux';
interface Props {
  
}
interface State {
 list: Array<object>,
 num:Number
}
export default class Home extends Component<Props, State> {
    state = {
        list: [],
        num:2
      }
   async componentDidMount(){
        let list1= await get('https://m.lagou.com/listmore.json?pageNo=1&pageSize=15')
        let list=list1.content.data.page.result
        this.setState({
         list
        })
    }
    click=async ()=>{
        let list1= await get(`https://m.lagou.com/listmore.json?pageNo=${this.state.num}&pageSize=15`)
        let list2=list1.content.data.page.result
        this.setState({
         list:[...this.state.list,...list2],
         num:this.state.num+1
        })
    }
    render() {
        return (
            <Wrap> 
                 <ScrollView>
                     <View>
                {
                    this.state.list.map((value,index)=>{
                        return(                           
                           <Ul> 
                               <Left>
                                  <Img
                                  onPress={() => {Actions.detail({id:value.positionId})}}
                                 source={{uri: 'http://www.lgstatic.com/'+ value.companyLogo}}
                               ></Img>  
                          <View>
                        <Text onPress={() => {Actions.detail({id:value.positionId})}} style={{fontSize:17,fontWeight:"bold"}}>{value.companyName}</Text>   
                        <Text onPress={() => {Actions.detail({id:value.positionId})}} style={{fontSize:13,lineHeight:20}}>{value.positionName}[{value.city}]</Text>      
                        <Text onPress={() => {Actions.detail({id:value.positionId})}} style={{fontSize:11,color:'#888'}}>{value.createTime}</Text>      
                        </View>   
                               </Left>                            
                        <View>
                         <Text onPress={() => {Actions.detail({id:value.positionId})}} style={{fontSize:17,color:'#00b38a'}}> {value.salary}</Text>  
                        </View>                                            
                         </Ul>                         
                        )                      
                    })
                }
                <Bottom>
                <Button
            onPress={this.click}
            title="加载更多"
          />
                </Bottom>
                </View>
             </ScrollView>

            </Wrap>
        )
    }
}
